<template>
    <view class="container">
        <!-- 顶部导航 -->
        <view class="header">
            <view class="back-btn">←</view>
            <text class="title">每日单词背诵</text>
        </view>

        <!-- 单词卡片 -->
        <view class="word-card">
            <view class="word-header">
                <text class="word">Hello</text>
                <text class="phonetic">/həˈləʊ/</text>
            </view>
            <text class="translation">int. 你好</text>
            <image class="sound-icon" src="/static/sound.png" @click="playSound"></image>
        </view>

        <!-- 操作按钮 -->
        <view class="action-buttons">
            <button class="btn mastered" @click="nextWord">已掌握</button>
            <button class="btn next" @click="nextWord">下一个</button>
        </view>
    </view>
</template>

<script>
export default {
    onLaunch() {
        console.log('App Launch')
    },
    onShow() {
        console.log('App Show')
    }
}
</script>

<style>
.container {
    padding: 20rpx;
    height: 100vh;
    background-color: #f5f5f5;
}

.header {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
}

.word-card {
    background: #fff;
    border-radius: 24rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
    margin-bottom: 40rpx;
    position: relative;
}

.word-header {
    display: flex;
    align-items: baseline;
    margin-bottom: 20rpx;
}

.word {
    font-size: 48rpx;
    font-weight: bold;
    margin-right: 20rpx;
}

.phonetic {
    color: #666;
    font-size: 32rpx;
}

.translation {
    font-size: 36rpx;
    color: #333;
}

.sound-icon {
    width: 60rpx;
    height: 60rpx;
    position: absolute;
    right: 40rpx;
    top: 40rpx;
}

.action-buttons {
    display: flex;
    gap: 30rpx;
    justify-content: center;
}

.btn {
    flex: 1;
    padding: 24rpx;
    border-radius: 16rpx;
    font-size: 32rpx;
    border: none;
}

.mastered {
    background: #e8f5e9;
    color: #4caf50;
}

.next {
    background: #2196f3;
    color: white;
}
</style>
<style>
	/*每个页面公共css */
</style>
